<template>
  <div class="page">
    <div class="c-main p20">
      <div class="c-body">
        <div class="c-user">
          <div class="c-avatar">
            <img :src="$store.state.userData.avatarUrl" alt="" />
            <span>{{
              $store.state.userData.nickName +
                " (" +
                $store.state.userData.realName +
                ")"
            }}</span>
          </div>
          <el-divider></el-divider>
          <div class="c-info">
            <el-row :gutter="20">
              <el-col :span="6">
                <div>
                  账号：{{
                    $store.state.userData.userName +
                      "@" +
                      $store.state.userData.corporations[0].accountSuffix
                  }}
                </div>
              </el-col>
              <el-col :span="6">
                <div>微信号：{{ $store.state.userData.wxNo }}</div>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="mt20">
              <el-col :span="6">
                <div>所属公司：{{ $store.state.userData.corporationName }}</div>
              </el-col>
              <el-col :span="6">
                <div>所属部门：{{ $store.state.userData.departmentName }}</div>
              </el-col>
              <el-col :span="6">
                <div>所属平台：{{ $store.state.userData.platformName }}</div>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="mt20">
              <el-col :span="12">
                <div>
                  个人渠道邀请码：{{
                    $store.state.userData.invitationCode || "无"
                  }}
                </div>
              </el-col>
            </el-row>
            <div class="mt20">
              <el-button
                type="primary"
                plain
                @click="rNavToChangePassword"
                v-hasAuth:system_usercenterSettingChangePassword
                >修改密码</el-button
              >
              <el-button
                type="primary"
                @click="rShowBillDrawerCp"
                v-hasAuth:system_usercenterExclusiveBillList
                >我的渠道推广海报</el-button
              >
              <el-button
                type="primary"
                @click="rGetInvitationCodeQrcode"
                v-hasAuth:system_usercenterChannelQrcode
                >我的渠道注册二维码</el-button
              >
              <el-button
                type="primary"
                @click="rGetActorInvitationCodeQrcode"
                v-hasAuth:system_usercenterActorQrcode
                >我的主播注册二维码</el-button
              >
            </div>
          </div>
        </div>
        <el-divider></el-divider>
      </div>
    </div>
    <yj-img-preview
      :pics="imgPreviewCp.data"
      :show="imgPreviewCp.config.show"
      @close="rCloseImgPreviewCp"
    >
    </yj-img-preview>
    <!-- billDrawerCp -->
    <el-drawer
      :title="billDrawerCp.config.title"
      :visible.sync="billDrawerCp.config.visible"
      :direction="billDrawerCp.config.direction"
      :size="billDrawerCp.config.size"
    >
      <div class="f-qrcodeDrawerCp f-billDrawerCp">
        <div class="n-content">
          <div class="scrollY full">
            <div class="n-billSelect">
              <el-row>
                <el-col :span="14" :offset="5">
                  <el-row>
                    <el-col :span="6"
                      ><el-button
                        class="btn-copy"
                        type="text"
                        disabled
                        style="display:block;text-align:right;width:100%;"
                        >请选择对应海报：</el-button
                      ></el-col
                    >
                    <el-col :span="18">
                      <el-select
                        v-model="billDrawerCp.data.billType"
                        placeholder="请选择"
                        style="display:block;"
                        @change="rSelectBillToCreate"
                      >
                        <el-option
                          v-for="item in billTypeListSupAjax.data"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
            <el-row v-if="billDrawerCp.data.billType">
              <el-col :span="14" :offset="5">
                <el-form ref="status" label-width="150px">
                  <el-row>
                    <el-col :span="15">
                      <el-form-item label="海报H5链接：">
                        <el-input
                          placeholder="渠道账号"
                          v-model="billAjax.data.posterH5Url"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="9">
                      <el-button-group>
                        <el-button
                          :data-clipboard-text="billAjax.data.posterH5Url"
                          class="btn-copy"
                          >复制链接</el-button
                        >
                        <el-button
                          ><a
                            :href="billAjax.data.posterUrl"
                            target="_blank"
                            download="bill.jpg"
                            >保存海报为图片</a
                          ></el-button
                        >
                      </el-button-group>
                    </el-col>
                  </el-row>
                </el-form>
                <div class="mt20">
                  <img class="hFull" :src="billAjax.data.posterUrl" alt="" />
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
// import { getInvitationCodeQrcode } from "@/api/user.js";
import {
  getViewPoster,
  getInvitationCodeQrcode,
  getActorInvitationCodeQrcode
} from "@/api/user.js";
import { getBillList } from "@/api/channel.js";
import Clipboard from "clipboard";

export default {
  name: "system_usercenterIndex",
  data: () => ({
    billTypeListSupAjax: {
      data: []
    },
    billAjax: {
      loading: false,
      data: {}
    },
    billDrawerCp: {
      config: {
        title: "",
        visible: false,
        direction: "ttb",
        size: "80%"
      },
      data: {
        billType: "",
        channelId: 0
      }
    },
    imgPreviewCp: {
      loading: false,
      config: {
        show: false
      },
      data: []
    },
    clipboard: null
  }),
  created() {
    let _that = this;
    _that.getBillList();
  },
  mounted() {
    let _that = this;
    _that.clipboard = new Clipboard(".btn-copy");

    _that.clipboard.on("success", function() {
      _that.$message.success("复制成功");
    });
    _that.clipboard.on("error", function() {
      _that.$message.error("复制失败");
    });
  },
  beforeDestroy() {
    this.clipboard.destroy();
  },
  methods: {
    rShowBillDrawerCp() {
      // this.billDrawerCp.data.channelId = id;
      this.billDrawerCp.config.visible = true;
      this.billDrawerCp.data.billType = "";
    },
    rSelectBillToCreate(posterId) {
      let _that = this;
      if (_that.billAjax.loading) {
        _that.$message.error("正在生成中，请稍等");
        return;
      }

      _that.billAjax.loading = true;
      getViewPoster({
        params: {
          // userQrCodeId: _that.billDrawerCp.data.channelId,
          posterId: posterId
        }
      })
        .then(resp => {
          let respData = resp.data || {};
          if (respData.code === _that.STATUS.success[0]) {
            _that.billAjax.data = respData.data;
          } else {
            _that.$message.error(respData.msg);
          }
        })
        .finally(() => {
          _that.billAjax.loading = false;
        });
    },
    getBillList() {
      let _that = this;

      getBillList({ params: { type: 2 } }).then(resp => {
        let respData = resp.data || {};
        if (respData.code === _that.STATUS.success[0]) {
          _that.billTypeListSupAjax.data = respData.data;
        }
      });
    },
    getInvitationCodeQrcode() {
      let _that = this;
      getInvitationCodeQrcode()
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            _that.imgPreviewCp.data = [respData.data];
            _that.imgPreviewCp.config.show = true;
          } else {
            _that.$message.error(respData.msg || "生成失败");
          }
        })
        .finally(() => {
          _that.imgPreviewCp.loading = false;
        });
    },
    getActorInvitationCodeQrcode() {
      let _that = this;
      getActorInvitationCodeQrcode()
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            _that.imgPreviewCp.data = [respData.data];
            _that.imgPreviewCp.config.show = true;
          } else {
            _that.$message.error(respData.msg || "生成失败");
          }
        })
        .finally(() => {
          _that.imgPreviewCp.loading = false;
        });
    },
    rNavToUserBill() {
      this.$router.push({ name: "system_usercenterExclusiveBillList" });
    },
    rNavToChangePassword() {
      this.$router.push({ name: "system_usercenterSettingChangePassword" });
    },
    rGetInvitationCodeQrcode() {
      let _that = this;
      if (_that.imgPreviewCp.loading) {
        return;
      }
      _that.imgPreviewCp.loading = true;
      _that.getInvitationCodeQrcode();
    },
    rGetActorInvitationCodeQrcode() {
      let _that = this;
      if (_that.imgPreviewCp.loading) {
        return;
      }
      _that.imgPreviewCp.loading = true;
      _that.getActorInvitationCodeQrcode();
    },
    rCloseImgPreviewCp() {
      this.imgPreviewCp.config.show = false;
    },
    rBack() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  .c-main {
    margin-top: 20px;
  }
  .c-user {
    .c-avatar {
      img {
        width: 50px;
        height: 50px;
        margin-right: 10px;
        border-radius: 50%;
        box-shadow: 0 0 20px #eee;
      }
    }
  }
  .f-qrcodeDrawerCp {
    overflow: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: 50px;
    bottom: 0;
    .n-content {
      height: 100%;
      padding: 30px 0;
      overflow: auto;
      box-sizing: border-box;
    }
    .n-note {
      line-height: 2;
      color: #999;
    }
  }
  .f-billDrawerCp {
    .n-content {
      padding: 50px 0 30px 0;
    }
    .n-billSelect {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      z-index: 5;
      border-bottom: 1px solid #eee;
      background-color: rgb(255, 255, 255);
    }
  }
}
</style>
